<template>
  <div
    class="ImgBox"
    :class="{
      borderRadius:isRadius
    }"
    v-if="src"
  >
    <el-image
      :style="{
          width: width+'px',
          height: width+'px',
        }"
      fit="contain"
      :src="srcName(src)"
      :preview-src-list="srcList(srcName(src))">
    </el-image>
    <div class="operate">
      <i class="el-icon-zoom-in"/>
    </div>
  </div>
</template>
<script>
export default {
  name: "ImgBox",
  props: {
    src:{
      type:String,
    },
    width:{
      type:Number,
      default: () => {
        return 120;
      },
    },
    isRadius:{
      type:Boolean,
      default: () => {
        return true;
      },
    },
  }, // 获取父组件数据
  components: {

  },
  created() {

  },
  data() {
    return {

    };
  },
  methods: {
    srcName(url){
      let http='http://test242-erpsuzhou.imagecolor.cn/'
      let src=http+url
      return src
    },
    srcList(url){
      let arr=[]
      arr[0]=url
      return arr
    },
  },
  computed: {

  }
};
</script>
<style  lang="scss" scoped>
$m:8px;
.ImgBox{
  background: #f5f5f5;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  &.borderRadius{
    border-radius: 4px;
  }
  &:not(:hover){
    .operate{
      display: none;
    }
  }
  .operate{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(0,0,0,0.7);
    pointer-events:none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    >*{
      font-size:22px;
    }
  }
}
</style>
